<template>
    <div class="browse-records">
        <div class="page-tit">浏览记录</div>
        <template v-for="(p, pdx) in list">
            <div class="time-tit flex-tit" :class="{ 'mt6': pdx != 0 }">
                <span>{{ p.smfdatestr }} 的记录</span>
                <a class="once-clear" v-if="pdx == 0" @click="showDelConfirm=true">一键清空</a>
            </div>
            <ul class="games-data">
                <li v-for="(item, idx) in p.list" class="dx-vd-item">
                    <a class="fav-d-item" @click.prevent="handleShowInfo(item,item.favmodule)">
                        <div class="img-flex-box">
                            <div class="main-img">
                                <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
                            </div>
                        </div>
                        <div class="fav-time hid-el">浏览于 {{ item.favdate }}</div>
                        <div class="ops">
                            <a class="fav-btn"  @click.stop="handleShowFav(item)" ></a>
                            <a class="i-del" @click.stop="handleClear(pdx,idx,item.id)"></a>
                        </div>
                    </a>
                </li>
            </ul>
        </template>
        <div class="no-more-text" v-if="!hasMore && list.length > 0">没有更多了</div>
        <Empty text="空空如也~" v-if="list.length==0"/>

        <a-modal v-model="showDelConfirm" destroyOnClose centered :footer="null" :closable="false" width="366px">
        <div class="fav-component">
            <div class="fav-header">
            系统提示
            </div>
            <div class="folder-con" style="margin-top:30px;text-align:center;font-size:14px;">
                确定要清空吗？清空后记录不能恢复
            </div>
            <div class="btns m-widbtns">
            <a class="pro-default-btn" @click="showDelConfirm = false">取消</a>
            <a class="pro-confirm-btn" @click="handleClearAll">确认</a>
            </div>
        </div>
        </a-modal>


        <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body  :visible.sync="showInfo" direction="btt">
            <!-- 游戏详情 -->
            <gameInfo @close="onInfoClose" v-if="pageType=='game'" :id="currentId"/>
            <!-- 作品详情 -->
            <workInfo @close="onInfoClose" v-else-if="pageType=='work'" :id="currentId"/>
            <!-- 文章详情 -->
            <articleInfo @close="onInfoClose" v-else-if="pageType=='article'" :id="currentId"/>
        </el-drawer>

        <ImgDetail @close="onImgInfoClose" :imgid="currentId" :olist="[]" v-if="showImgInfo" />

        <a-modal v-model="showFav" destroyOnClose centered :footer="null" :closable="false" width="471px">
            <Fav :favmodule="favBy" @close="showFav = false" :foldertype="foldertype" :imgids="currentIds" :articleid="favId"
            @favsucc="onFavSucc" />
        </a-modal>
    </div>
</template>


<script>
import Fav from '@/components/Fav'
import ImgDetail from '@/components/ImgDetail'
import gameInfo from '@/components/gameInfo'
import articleInfo from '@/components/articleinfo'
import workInfo from '@/components/workinfo'
import Empty from '@/components/Empty'
import {message} from 'ant-design-vue'
export default {
    components:{Empty,gameInfo,articleInfo,workInfo,ImgDetail,Fav},
    data() {
        return {
            currentIds:[],
            favBy:'',
            foldertype:-1,
            favId:'',
            showFav:false,
            showImgInfo:false,
            currentId:'',
            pageType:'',
            curFullPath:'',
            showInfo:false,
            parentIdx:-1,
            childIdx:-1,
            id:'',
            showDelConfirm:false,
            list: [],
            favModuleEnum:{
                'img':'IMG',
                'article':'ARTICLE',
                'WORK':'WORK',
                'GAME':'GAME'
            },
            page:1,
            pageSize:4,
            total:0,
            totalPage:0,
            hasMore:true,
            alllist:[],
            scrollLoaded:false
        }
    },
    mounted() {
        let token = window.localStorage.getItem('token')
        if (!token) {
            this.$parent.showLoginView = true;
            return;
        }

        let _list = this.$bhelper.get();
        let that=this;
        _list.map(item=>{
            item.list.reverse();
            item.list.map(mitem=>{
                let _vtime=null;
                if(item.updateTime){
                    _vtime=item.updateTime;
                }else if(item.createTime){
                    _vtime=item.createTime;
                }else if(item.create_time){
                    _vtime=item.create_time.replace('T',' ');
                }
                _vtime=Math.abs(new Date(_vtime).getTime());
                let itempre=mitem.favmodule=='img'?'':'article-';
                mitem.lazy = {
                    src:that.$imgdomainurl+itempre+mitem.id+'-'+_vtime+'@1x432.webp',
                    error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                }
                let srcsets=[];
                srcsets.push(that.$imgdomainurl+itempre+mitem.id+'-'+_vtime+'@1x432.webp 1x');
                srcsets.push(that.$imgdomainurl+itempre+mitem.id+'-'+_vtime+'@2x432.webp 2x');
                srcsets.push(that.$imgdomainurl+itempre+mitem.id+'-'+_vtime+'@3x432.webp 3x');
                mitem.srcsets=srcsets.join(',');
            })
        })

        let total=_list.length;
        that.totalPage = total % that.pageSize == 0 ? total / that.pageSize : parseInt(total / that.pageSize) + 1;
        this.alllist=_list;

        this.queryList();

        window.addEventListener('scroll',this.docScroll);
    },
    destroyed(){
        window.removeEventListener('scroll',this.docScroll);
    },
    methods:{
        loadMore(){
            this.page++;
            this.queryList();
        },
        docScroll() {
            let that = this;
            let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;

            if (that.scrollLoaded == false) return
            if (jHeight <= 200 && that.hasMore) {
                that.scrollLoaded = false;
                that.loadMore();
            }
        },
        queryList(){
            let list=this.paginateArray(this.alllist,this.pageSize,this.page);
            this.list=[...this.list,...list];
            this.hasMore=this.page<this.totalPage;
            let that=this;
            setTimeout(()=>{
                that.scrollLoaded=true;
            },1200)
        },
        paginateArray(array, pageSize, page) {
            // 计算分页后的子数组开始和结束索引
            const start = (page - 1) * pageSize;
            const end = start + pageSize;
        
            // 返回分页后的子数组
            return array.slice(start, end);
        },
        handleShowFav(item){
            this.favBy=this.favModuleEnum[item.favmodule];
            if(item.favmodule=='img'){
                this.foldertype=0;
                this.currentIds=[item.id];
                this.favId='';
            }else{
                this.foldertype=1;
                this.currentIds=[];
                this.favId=item.id;
            }
            this.showFav = true;
        },
        onFavSucc() {
            // if (this.foldertype ==0) {
            //     let that = this;
            //     this.imageList.map(r => {
            //     if (that.currentIds.includes(r.id)) {
            //         r.collect=true;
            //         r.selected = false;
            //     }
            //     })
            //     this.actImageList.map(r => {
            //     if (that.currentIds.includes(r.id)) {
            //         r.collect=true;
            //         r.selected = false;
            //     }
            //     })
            //     this.currentIds = [];
            // } else {
            //     this.info.collectCount++;
            // }
            this.showFav = false;
        },
        loadError(e){
            e.target.removeAttribute('srcset');
        },
        onImgInfoClose(){
            window.history.pushState({}, 0,this.curFullPath);
            document.body.style.overflow='inherit';
            this.showImgInfo=false;
        },
        onInfoClose(){
            window.history.pushState({}, 0,this.curFullPath);
            document.body.style.overflow='inherit';
            this.showInfo=false;
        },
        handleShowInfo(_item,_pageType){
            this.curFullPath=this.$route.fullPath;
            this.currentId=_item.id;
            document.body.style.overflow='hidden';
            if(_pageType=='img'){
                // let routeData = this.$router.resolve({
                //     path: '/'+_pageType+'/'+_item.id
                // })
                // window.open(routeData.href, '_blank')
                window.history.pushState({}, 0, '/'+_pageType+'/'+_item.id);
                this.showImgInfo=true;
                return;
            }
            let routeData = this.$router.resolve({
                path: '/'+_pageType+'/'+_item.id
            })
            window.open(routeData.href, '_blank')
            // this.pageType=_pageType;
            // window.history.pushState({}, 0, '/'+_pageType+'/'+_item.id);
            // this.showInfo=true;
        },
        handleClear(pdx,idx,id){
            this.list[pdx].list.splice(idx,1);
            this.$bhelper.del(id);
            message.success('删除成功')
        },
        handleClearAll(){
            this.list=[];
            this.$bhelper.clearall();
            message.success('删除成功');
            this.showDelConfirm=false;
        }
    }
}
</script>
<style lang="less">
.browse-records {
    .page-tit {
        line-height: 37px;
        font-size: 26px;
        color: #fff;
        margin-bottom: 26px;
        font-weight: 500;
    }

    .time-tit {
        line-height: 25px;
        font-size: 18px;
        color: #fff;
        margin-bottom: 20px;
        font-weight: 500;

        &.flex-tit {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .once-clear {
                background: #29272F;
                color: #fff;
                font-weight: normal;
                width: 84px;
                line-height: 40px;
                font-size: 14px;
                text-align: center;
                border-radius: 10px;
                // margin: 0px 10px;
                transition:.1s all linear;
                &:hover{
                    opacity:.7;
                }
            }
        }
    }

    .mt6 {
        margin-top: 60px;
    }

    .bw-records {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 60px;
        grid-gap: 20px;

        li {
            width: calc((100% - 80px) / 5);
            height: 210px;
            min-width: 312px;
            // margin-right:20px;
            // margin-bottom:20px;
            border-radius: 16px;
            overflow: hidden;
            transition: .1s all linear;
            animation: opacity .2s linear;

            &:nth-child(5n) {
                margin-right: 0px;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .games-data {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        grid-gap: 20px;

        .gd-item {
            border-radius: 16px;
            position: relative;
            overflow: hidden;
            margin-right: 20px;
            margin-bottom: 20px;
            // transition:.1s all linear;
            animation: opacity .2s linear;

            // border:2px solid #111;
            .hid-el {
                // display: none;
                opacity: 0;
            }

            &:hover {
                border: 2px solid #11CCB1;
                cursor: pointer;

                a {
                    >img {
                        transform: scale(1.08);
                    }
                }

                .hid-el {
                    // display: inline-block;
                    opacity: 1;

                    transition: 0.1s all linear;
                }
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .left-icos {
                position: absolute;
                left: 10px;
                top: 10px;
                display: flex;
                align-items: center;

                img {
                    &:first-child {
                        margin-right: 10px;
                    }
                }
            }

            .right-icos {
                position: absolute;
                right: 10px;
                top: 10px;
                display: flex;
                align-items: center;

                img {
                    &:first-child {
                        // margin-right:10px;
                    }
                }
            }

            .basic-info {
                position: absolute;
                bottom: 10px;
                left: 10px;
                z-index: 1;
                color: #fff;

                .title {
                    font-size: 16px;
                    font-weight: 500;
                    margin-bottom: 3px;
                }

                .bot-desc {
                    font-size: 12px;
                    color: #fff;
                    display: flex;

                    .pnum {
                        background: url('../assets/pro/icon_pic.svg') no-repeat;
                        background-position: left center;
                        padding-left: 16px;
                    }

                    .uname {
                        margin-left: 32px;
                        background: url('../assets/pro/icon_user.svg') no-repeat;
                        background-position: left center;
                        padding-left: 16px;
                    }
                }
            }
        }

        &.small {
            .gd-item {
                width: 216px;
                height: 216px;
                min-width: 216px;

                &:nth-child(7n) {
                    margin-right: 0px !important;
                }
            }
        }

        &.big {
            .gd-item {
                width: 312px;
                height: 312px;
                min-width: 312px;

                &:nth-child(5n) {
                    margin-right: 0px !important;
                }
            }
        }

        .dx-vd-item {
            width: calc((100% - 80px) / 5);
            height: 210px;
            // margin-right: 20px;
            // margin-bottom: 20px;
            // background: #171717;
            border-radius: 16px;
            overflow: hidden;
            color: #fff;
            position: relative;
            border: 2px solid transparent;
            transition: .1s all linear;

            .hid-el {
                // display: none;
                opacity: 0;
            }

            &:hover {
                border-color:#11CCB1;
                cursor: pointer;

                a {
                    img {
                        transform: scale(1.08);
                    }
                }
                
                .ops{
                    display: flex;
                    z-index:1;
                }
                .hid-el {
                    opacity: 1;
                    transition: 0.1s all linear;
                }
            }

            .fav-d-item {
                position: relative;
                animation: opacity .2s linear;
                display: inline-block;
                width: 100%;

                .fav-time {
                    position: absolute;
                    z-index: 1;
                    color: #fff;
                    padding: 0px 0px 11px 10px;
                    bottom: 0px;
                    line-height: 20px;
                }

                .ops {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    transition: .2s all linear;

                    a {
                        border-radius: 12px;
                        background: #FFFFFF;
                        width: 40px;
                        height: 40px;
                        transition: .2s all linear;

                        &:hover {
                            // opacity:.9;
                            // background-color: #e1e1e1;
                        }
                    }
                    .fav-btn{
                        background-color: #11CCB1;
                        color: #fff;
                        width: 40px;
                        height: 40px;
                        border-radius: 12px;
                        cursor: pointer;
                        background-image: url('../assets/pro/un_favicon.svg');
                        background-repeat: no-repeat;
                        background-position: center;
                        margin-right:10px;
                        transition:.1s all linear;
                        &:hover {
                            background-color: #0fab94;
                        }
                    }
                    .i-del {
                        background-image: url('../assets/pro/i_del.png');
                        background-size: 22px 22px;
                        background-repeat: no-repeat;
                        background-position: center;
                        margin-right: 10px;
                        &:hover {
                            // opacity:.9;
                            background-color: #e1e1e1;
                        }
                    }

                    .i-edit {
                        background-image: url('../assets/pro/i_edit.png');
                        background-size: 22px 22px;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                }

                &:hover {
                    border:none;
                    &:after {
                        content: '';
                        background: rgba(0, 0, 0, 0.5);
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        height: 100%;
                    }
                }

                &:nth-child(5n) {
                    margin-right: 0px;
                }

                &.create-btn {
                    border: 2px dashed #424242;
                    border-radius: 16px;
                    transition: 0.1s all linear;

                    a {
                        display: inline-block;
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        transition: .1s all linear;

                        .plus-icon {
                            width: 40px;
                            height: 40px;
                            border-radius: 40px;
                            background-color: #29272f;
                            display: block;
                            text-align: center;
                            line-height: 40px;
                            margin: 91px auto 18px auto;
                            background-image: url('../assets/pro/list_create_plusico.svg');
                            background-repeat: no-repeat;
                            background-size: 40px 40px;
                        }

                        .text {
                            font-size: 14px;
                            color: #fff;
                            font-weight: 500;
                        }
                    }

                    &:hover {
                        border-color: #fff;
                    }
                }

                .img-flex-box {
                    display: flex;
                    align-items: center;
                    position: relative;
                    height: 210px;

                    .lt-img {
                        width: 204px;
                        height: 210px;
                        margin-right: 6px;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .rt-img {
                        .next-img {
                            width: 102px;
                            height: 102px;
                            margin-bottom: 6px;
                            border-radius: 16px;
                            overflow: hidden;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .last-img {
                            width: 102px;
                            height: 102px;
                            border-radius: 16px;
                            overflow: hidden;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                    }

                    .main-img {
                        height: 210px;
                        width: 100%;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                        .ops {
                            position: absolute;
                            top: 10px;
                            right: 10px;
                            display: none;
                            transition: .2s all linear;

                            a {
                                border-radius: 12px;
                                background: #FFFFFF;
                                width: 40px;
                                height: 40px;
                                transition: .2s all linear;

                                &:hover {
                                    // opacity:.9;
                                    // background-color: #e1e1e1;
                                }
                            }

                            .i-del {
                                background-image: url('../assets/pro/i_del.png');
                                background-size: 22px 22px;
                                background-repeat: no-repeat;
                                background-position: center;
                                margin-right: 10px;
                            }

                            .i-edit {
                                background-image: url('../assets/pro/i_edit.png');
                                background-size: 22px 22px;
                                background-repeat: no-repeat;
                                background-position: center;
                            }
                        }
                    }

                    .author {
                        position: absolute;
                        bottom: 10px;
                        left: 9px;
                        background: rgba(255, 255, 255, 0.9);
                        border-radius: 12px;
                        padding: 10px 13px;
                        transition: 0.1s all linear;
                        width: 164px;
                        cursor: pointer;

                        &:hover {
                            background: rgba(255, 255, 255, 1);
                        }

                        .ar-tit {
                            font-size: 14px;
                            font-weight: 500;
                            color: #383737;
                            line-height: 20px;
                            margin-bottom: 5px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            background: url('../assets/pro/take_tit_icon.svg') no-repeat;
                            background-position: left center;
                            padding-left: 22px;
                        }

                        .u-box {
                            display: flex;
                            padding-left: 20px;

                            .name {
                                font-size: 14px;
                                color: #969696;
                                font-weight: 500;
                            }

                            .avatar {
                                width: 20px;
                                height: 20px;
                                border-radius: 20px;
                                margin-right: 7px;
                            }
                        }
                    }

                    .at-btn {
                        color: #fff;
                        font-size: 14px;
                        background-color: #11CCB1;
                        border-radius: 12px;
                        line-height: 44px;
                        background-image: url('../assets/pro/un_follow_ico.svg');
                        background-repeat: no-repeat;
                        background-position: 11px center;
                        // width:82px;
                        padding-left: 35px;
                        padding-right: 19px;
                        text-align: center;
                        position: absolute;
                        left: 10px;
                        top: 10px;
                    }

                    .ated-btn {
                        color: #383737;
                        font-size: 14px;
                        background-color: #fff;
                        border-radius: 12px;
                        line-height: 44px;
                        background-image: url('../assets/pro/cancel_follow_ico.svg');
                        background-repeat: no-repeat;
                        background-position: 11px center;
                        // width:82px;
                        padding-left: 35px;
                        padding-right: 19px;
                        text-align: center;
                        position: absolute;
                        left: 10px;
                        top: 10px;
                    }

                    .edit-btn {
                        color: #383737;
                        font-size: 14px;
                        background-color: #fff;
                        border-radius: 12px;
                        line-height: 44px;
                        width: 40px;
                        height: 40px;
                        text-align: center;
                        position: absolute;
                        right: 10px;
                        top: 10px;
                        background-image: url('../assets/pro/edit_ico.svg');
                        background-repeat: no-repeat;
                        background-position: center center;
                    }

                    .hid-el {
                        // display: none;
                        transition: .1s all linear;
                        opacity: 0;
                    }

                    &:hover {
                        .hid-el {
                            // display: inline-block;
                            opacity: 1;
                        }
                    }
                }

                .bot-desc {
                    font-size: 16px;
                    display: flex;
                    justify-content: space-between;
                    margin-top: 9px;
                    align-items: center;
                    padding-right: 16px;

                    .file-name {
                        color: #fff;
                        font-weight: 500;
                        padding-left: 15px;
                        font-size: 16px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .zan-num {
                        color: #969696;
                        background: url('../assets/pro/dianzanicon.svg') no-repeat;
                        padding-left: 24px;
                        font-size: 12px;
                        background-position: left center;
                    }

                    .type-text {
                        border: 1px solid #4B4B52;
                        border-radius: 2px;
                        color: #848393;
                        font-size: 12px;
                        padding: 0px 5px;
                        line-height: 18px;
                        white-space: nowrap;
                        margin-left: 30px;
                    }
                }

                .bot-author {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-left: 15px;
                    margin-top: 11px;
                    padding-bottom: 14px;
                    padding-right: 16px;

                    .u {
                        display: flex;
                        align-items: center;

                        .img-box {
                            width: 20px;
                            height: 20px;
                            border-radius: 20px;
                            overflow: hidden;
                            margin-right: 6px;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        &:hover {
                            color: #11CCB1;
                        }
                    }

                    .like-num {
                        background: url('../assets/pro/icon_like2.svg') no-repeat;
                        background-position: left center;
                        background-size: 20px 20px;
                        padding-left: 22px;
                    }
                }
            }
        }
    }
}
</style>